<template>
  <div class="container">
    <h1>Agent Configuration</h1>
    <div v-for="(agent, index) in agents" :key="index" class="agent-card">
      <input v-model="agent.baseUrl" placeholder="Base URL" />
      <input v-model="agent.token" placeholder="Token" />
      <div class="agent-actions">
        <button class="remove-button" @click="removeAgent(index)">
          Remove
        </button>
      </div>
    </div>
    <button class="add-button" @click="addAgent">Add Agent</button>
    <button class="save-button" @click="saveAgents">Save</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { useAgentStore } from '@/store/agentConfig';

export default defineComponent({
  name: 'AgentConfig',
  setup() {
    const agentStore = useAgentStore();
    const agents = ref(agentStore.agents);

    const addAgent = () => {
      agents.value.push({ baseUrl: '', token: '' });
    };

    const removeAgent = (index: number) => {
      agents.value.splice(index, 1);
    };

    const saveAgents = () => {
      agentStore.setAgents(agents.value);
    };

    return {
      agents,
      addAgent,
      removeAgent,
      saveAgents,
    };
  },
});
</script>

<style scoped>
.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

h1 {
  text-align: center;
  margin-bottom: 20px;
  color: #333;
}

.agent-card {
  background: #fff;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.agent-card input {
  width: 100%;
  padding: 8px;
  margin-bottom: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.agent-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

button {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

button:hover {
  opacity: 0.9;
}

.add-button {
  background-color: #4CAF50;
  color: white;
}

.remove-button {
  background-color: #f44336;
  color: white;
}

.save-button {
  background-color: #2196F3;
  color: white;
  margin-top: 16px;
}
</style>
